﻿<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8" />
    <title>我的简历 - Works</title>

    <!-- Meta Data -->
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta name="format-detection" content="telephone=no" />
    <meta name="format-detection" content="address=no" />
    <meta name="author" content="ArtTemplate" />
    <meta name="description" content="wheat" />

    <!-- Twitter data -->
    <meta name="twitter:card" content="summary_large_image">
    <meta name="twitter:site" content="@ArtTemplates">
    <meta name="twitter:title" content="wheat">
    <meta name="twitter:description" content="wheat">
    <meta name="twitter:image" content="/assets/vitae/img/social.jpg">

    <!-- Open Graph data -->
    <meta property="og:title" content="ArtTemplate" />
    <meta property="og:type" content="website" />
    <meta property="og:url" content="your url website" />
    <meta property="og:image" content="/assets/vitae/img/social.jpg" />
    <meta property="og:description" content="wheat" />
    <meta property="og:site_name" content="wheat" />

    <!-- Favicons -->
    <link rel="apple-touch-icon" sizes="144x144" href="/assets/vitae/img/favicons/apple-touch-icon-144x144.png">
    <link rel="apple-touch-icon" sizes="114x114" href="/assets/vitae/img/favicons/apple-touch-icon-114x114.png">
    <link rel="apple-touch-icon" sizes="72x72" href="/assets/vitae/img/favicons/apple-touch-icon-72x72.png">
    <link rel="apple-touch-icon" sizes="57x57" href="/assets/vitae/img/favicons/apple-touch-icon-57x57.png">
    <link rel="shortcut icon" href="/assets/img/favicon.ico" type="image/png">

    <!-- Styles -->
    <link rel="stylesheet" type="text/css" href="/assets/vitae/css/style.css" />
    <link rel="stylesheet" href="https://at.alicdn.com/t/c/font_4073506_b2fh5gybgpl.css">
    <link rel="stylesheet" type="text/css" href="/assets/vitae/css/style-demo.css" />
    <style>
        .boxes::before {
            content: "";
            position: absolute;
            width: 370px;
            height: 80%;
            z-index: -2;
            left: -25px;
            top: 30px;
            background: linear-gradient(rgb(0, 255, 13), rgb(45, 218, 203),rgb(255, 106, 156),rgb(251, 255, 26));
            animation: rotate 4s linear infinite;
        }
        @keyframes rotate {
            from {
                transform: rotate(0deg);
            }
            to {
                transform: rotate(360deg);
            }
        }
    </style>
</head>

<body>
    <!-- Preloader -->
    <div class="preloader">
        <div class="preloader__progress"><span></span></div>
        <iframe id="loding" src="/components/Loding.html" frameborder="0"></iframe>
    </div>

    <main class="main">
        <!-- Header Image -->
        <div class="header-image">
            <div class="js-parallax" style="background-image: url(/assets/vitae/img/image_header.jpg);"></div>
        </div>

        <div class="container gutter-top">
            <!-- Header -->
            <header class="header box">
                <div class="header__left">
                    <div class="header__photo">
                        <img class="header__photo-img" src="/assets/img/avatar.jpg" alt="Ronald Robertson">
                    </div>
                    <div class="header__base-info">
                        <h4 class="title titl--h4" i18n="name">Ronald Robertson</h4>
                        <div class="status" i18n="job">Creative Director</div>
                        <ul class="header__social">
                            <li><span i18n="ageName">age：</span><span i18n="age">22</span></li>
                            <li><span i18n="educationName">education：</span><span i18n="education">bachelor</span></li>
                        </ul>
                    </div>
                </div>
                <div class="header__right">
                    <ul class="header__contact">
                        <span class="overhead" i18n="emailName">Email</span>
                        <li i18n="email">1356557225@qq.com</li>
                        <span class="overhead" i18n="phoneName">Phone</span>
                        <li i18n="phone">+86 153-0246-4434</li>
                    </ul>
                    <ul class="header__contact">
                        <span class="overhead" i18n="birthdayName">Birthday</span>
                        <li i18n="birthday">20 April 2001</li>
                        <span class="overhead" i18n="locationName">Location</span>
                        <li i18n="location">Zhaoqin, China</li>
                    </ul>
                </div>
            </header>

            <div class="row sticky-parent">
                <!-- Sidebar nav -->
                <aside class="col-12 col-md-12 col-lg-2">
                    <div class="sidebar box sticky-column">
                        <ul class="nav">
                            <li class="nav__item"><a href="/pages/vitae.html"><i class="icon-user"></i><span i18n="About">About</span></a></li>
                            <li class="nav__item"><a href="/components/vitae/resume.html"><i class="icon-file-text"></i><span i18n="Resume">synopsis</span></a></li>
                            <li class="nav__item"><a class="active" href="/components/vitae/works.html"><i class="icon-codesandbox"></i><span i18n="Works">Works</span></a></li>
                            <!-- <li class="nav__item"><a href="/components/vitae/blog.html"><i class="icon-book-open"></i>Blog</a></li> -->
                            <!-- <li class="nav__item"><a href="/components/vitae/contact.html"><i class="icon-book"></i><span i18n="Contact">Contact</span></a></li> -->
                            <li class="nav__item">
                                <div id="tooltip-inner"></div><a id="translate-button"><i class="icon-translate-filling"></i></a></li>
                        </ul>
                    </div>
                </aside>

                <!-- Content -->
                <div class="col-12 col-md-12 col-lg-10">
                    <div class="box box-content">
                        <div class="pb-2">
                            <h1 class="title title--h1 first-title title__separate" i18n="Portfolio_title">Portfolio</h1>
                        </div>

                        <!-- Filter -->
                        <div class="select">
                            <span class="placeholder">Select category</span>
                            <ul class="filter">
                                <li class="filter__item">Category</li>
                                <li class="filter__item active" data-filter="*"><a class="filter__link active" href="#filter" i18n="CategoryAll">All</a></li>
                                <li class="filter__item" data-filter=".category-zhidun"><a class="filter__link" href="#filter" i18n="Category1">Zhi Dun</a></li>
                                <li class="filter__item" data-filter=".category-chaozhou"><a class="filter__link" href="#filter" i18n="Category2">Chaozhou geographical indication traceability management system</a></li>
                                <li class="filter__item" data-filter=".category-questionnaire"><a class="filter__link" href="#filter" i18n="Category3">Questionnaire mini program</a></li>
                                <li class="filter__item" data-filter=".category-Tongxin"><a class="filter__link" href="#filter" i18n="Category4">Tongxin data management system</a></li>
                                <li class="filter__item" data-filter=".category-Puxi"><a class="filter__link" href="#filter" i18n="Category5">Puxi background management system</a></li>
                            </ul>
                            <input type="hidden" name="changemetoo" />
                        </div>

                        <!-- Gallery -->
                        <div class="gallery-grid js-grid-row js-filter-container">
                            <div class="gutter-sizer"></div>
                            <!-- Item 1 -->
                            <figure class="gallery-grid__item category-chaozhou">
                                <div class="gallery-grid__image-wrap boxes">
                                    <div class="under2"></div>
                                    <img class="gallery-grid__image cover lazyload" src="/assets/vitae/img/image_01.png" data-zoom alt="" />
                                </div>
                                <figcaption class="gallery-grid__caption">
                                    <h4 class="title title--h6 gallery-grid__title" i18n="photo_title1">User information page</h4>
                                    <span class="gallery-grid__category" i18n="Category2">Chaozhou geographical indication traceability management system</span>
                                </figcaption>
                            </figure>

                            <!-- Item 2 -->
                            <figure class="gallery-grid__item category-chaozhou">
                                <div class="gallery-grid__image-wrap boxes">
                                    <img class="gallery-grid__image cover lazyload" src="/assets/vitae/img/image_02.png" data-zoom alt="" />
                                </div>
                                <figcaption class="gallery-grid__caption">
                                    <h4 class="title title--h6 gallery-grid__title" i18n="photo_title2">Encapsulate popup components</h4>
                                    <span class="gallery-grid__category" i18n="Category2">Chaozhou geographical indication traceability management system</span>
                                </figcaption>
                            </figure>

                            <!-- Item 3 -->
                            <figure class="gallery-grid__item category-zhidun">
                                <div class="gallery-grid__image-wrap boxes">
                                    <img class="gallery-grid__image cover lazyload" src="/assets/vitae/img/image_03.png" data-zoom alt="" />
                                </div>
                                <figcaption class="gallery-grid__caption">
                                    <h4 class="title title--h6 gallery-grid__title" i18n="photo_title3">entry page</h4>
                                    <span class="gallery-grid__category" i18n="Category1">Zhi Dun</span>
                                </figcaption>
                            </figure>

                            <!-- Item 4 -->
                            <figure class="gallery-grid__item category-zhidun">
                                <div class="gallery-grid__image-wrap boxes">
                                    <img class="gallery-grid__image cover lazyload" src="/assets/vitae/img/image_04.png" data-zoom alt="" />
                                </div>
                                <figcaption class="gallery-grid__caption">
                                    <h4 class="title title--h6 gallery-grid__title" i18n="photo_title4">Home</h4>
                                    <span class="gallery-grid__category" i18n="Category1">Zhi Dun</span>
                                </figcaption>
                            </figure>

                            <!-- Item 5 -->
                            <figure class="gallery-grid__item category-zhidun">
                                <div class="gallery-grid__image-wrap boxes">
                                    <img class="gallery-grid__image cover lazyload" src="/assets/vitae/img/image_05.png" data-zoom alt="" />
                                </div>
                                <figcaption class="gallery-grid__caption">
                                    <h4 class="title title--h6 gallery-grid__title" i18n="photo_title5">Home #screen recording</h4>
                                    <span class="gallery-grid__category" i18n="Category1">Zhi Dun</span>
                                </figcaption>
                            </figure>

                            <!-- Item 6 -->
                            <figure class="gallery-grid__item category-Tongxin">
                                <div class="gallery-grid__image-wrap boxes">
                                    <img class="gallery-grid__image cover lazyload" src="/assets/vitae/img/image_06.png" data-zoom alt="" />
                                </div>
                                <figcaption class="gallery-grid__caption">
                                    <h4 class="title title--h6 gallery-grid__title" i18n="photo_title6">Home #screen recording</h4>
                                    <span class="gallery-grid__category" i18n="Category4">Tongxin data management system</span>
                                </figcaption>
                            </figure>

                            <!-- Item 7 -->
                            <figure class="gallery-grid__item category-Tongxin">
                                <div class="gallery-grid__image-wrap boxes">
                                    <img class="gallery-grid__image cover lazyload" src="/assets/vitae/img/image_07.png" data-zoom alt="" />
                                </div>
                                <figcaption class="gallery-grid__caption">
                                    <h4 class="title title--h6 gallery-grid__title" i18n="photo_title7">Home #screen recording</h4>
                                    <span class="gallery-grid__category" i18n="Category4">Tongxin data management system</span>
                                </figcaption>
                            </figure>

                            <!-- Item 8 -->
                            <figure class="gallery-grid__item category-Tongxin">
                                <div class="gallery-grid__image-wrap boxes">
                                    <img class="gallery-grid__image cover lazyload" src="/assets/vitae/img/image_08.png" data-zoom alt="" />
                                </div>
                                <figcaption class="gallery-grid__caption">
                                    <h4 class="title title--h6 gallery-grid__title" i18n="photo_title8">Home #screen recording</h4>
                                    <span class="gallery-grid__category" i18n="Category4">Tongxin data management system</span>
                                </figcaption>
                            </figure>

                            <!-- Item 9 -->
                            <figure class="gallery-grid__item category-questionnaire">
                                <div class="gallery-grid__image-wrap boxes">
                                    <img class="gallery-grid__image cover lazyload" src="/assets/vitae/img/image_01.jpg" data-zoom alt="" />
                                </div>
                                <figcaption class="gallery-grid__caption">
                                    <h4 class="title title--h6 gallery-grid__title" i18n="photo_title9">Home #screen recording</h4>
                                    <span class="gallery-grid__category" i18n="Category3">Questionnaire mini program</span>
                                </figcaption>
                            </figure>

                            <!-- Item 10 -->
                            <figure class="gallery-grid__item category-questionnaire">
                                <div class="gallery-grid__image-wrap boxes">
                                    <img class="gallery-grid__image cover lazyload" src="/assets/vitae/img/image_02.jpg" data-zoom alt="" />
                                </div>
                                <figcaption class="gallery-grid__caption">
                                    <h4 class="title title--h6 gallery-grid__title" i18n="photo_title10">Home #screen recording</h4>
                                    <span class="gallery-grid__category" i18n="Category3">Questionnaire mini program</span>
                                </figcaption>
                            </figure>

                            <!-- Item 11 -->
                            <figure class="gallery-grid__item category-questionnaire">
                                <div class="gallery-grid__image-wrap boxes">
                                    <img class="gallery-grid__image cover lazyload" src="/assets/vitae/img/image_03.jpg" data-zoom alt="" />
                                </div>
                                <figcaption class="gallery-grid__caption">
                                    <h4 class="title title--h6 gallery-grid__title" i18n="photo_title11">Home #screen recording</h4>
                                    <span class="gallery-grid__category" i18n="Category3">Questionnaire mini program</span>
                                </figcaption>
                            </figure>

                            <!-- Item 12 -->
                            <figure class="gallery-grid__item category-questionnaire">
                                <div class="gallery-grid__image-wrap boxes">
                                    <img class="gallery-grid__image cover lazyload" src="/assets/vitae/img/image_04.jpg" data-zoom alt="" />
                                </div>
                                <figcaption class="gallery-grid__caption">
                                    <h4 class="title title--h6 gallery-grid__title" i18n="photo_title12">Home #screen recording</h4>
                                    <span class="gallery-grid__category" i18n="Category3">Questionnaire mini program</span>
                                </figcaption>
                            </figure>
                        </div>
                        <!-- Gallery End -->
                    </div>

                    <!-- Footer -->
                    <footer class="footer">© 2024 wheat</footer>
                </div>
            </div>
        </div>
    </main>

    <div class="back-to-top"></div>

    <!-- SVG masks -->
    <svg class="svg-defs">
        <clipPath id="avatar-box">
            <path d="M1.85379 38.4859C2.9221 18.6653 18.6653 2.92275 38.4858 1.85453 56.0986.905299 77.2792 0 94 0c16.721 0 37.901.905299 55.514 1.85453 19.821 1.06822 35.564 16.81077 36.632 36.63137C187.095 56.0922 188 77.267 188 94c0 16.733-.905 37.908-1.854 55.514-1.068 19.821-16.811 35.563-36.632 36.631C131.901 187.095 110.721 188 94 188c-16.7208 0-37.9014-.905-55.5142-1.855-19.8205-1.068-35.5637-16.81-36.63201-36.631C.904831 131.908 0 110.733 0 94c0-16.733.904831-37.9078 1.85379-55.5141z"/>
        </clipPath>
        <clipPath id="avatar-hexagon">
             <path d="M0 27.2891c0-4.6662 2.4889-8.976 6.52491-11.2986L31.308 1.72845c3.98-2.290382 8.8697-2.305446 12.8637-.03963l25.234 14.31558C73.4807 18.3162 76 22.6478 76 27.3426V56.684c0 4.6805-2.5041 9.0013-6.5597 11.3186L44.4317 82.2915c-3.9869 2.278-8.8765 2.278-12.8634 0L6.55974 68.0026C2.50414 65.6853 0 61.3645 0 56.684V27.2891z"/>
        </clipPath>		
    </svg>



    <!-- JavaScripts -->
    <script src="/assets/vitae/js/jquery-3.4.1.min.js"></script>
    <script src="/assets/vitae/js/plugins.min.js"></script>
    <script src="/assets/vitae/js/common.js"></script>
    <script src="/assets/vitae/js/jquery.i18n.min.js"></script>
    <script src="/assets/vitae/js/cn-en-translate.js"></script>
    <script src="/assets/vitae/demo/plugins-demo.js"></script>
</body>

</html>